<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><%= live_redirect(gettext("Home"), to: "/") %></li>
    <li class="is-active"><%= live_redirect(gettext("TeslaFi Import"), to: "") %></li>
  </ul>
</nav>

<div class="container is-flex mb-3" style="align-items: center; justify-content: space-between;">
  <h2 class="title is-4 is-marginless">
    <%= ngettext(
      "Found %{count} file",
      "Found %{count} files",
      length(@status.files),
      count: length(@status.files)
    ) %>
  </h2>
  <%= link(raw("<span class='icon'><span class='mdi mdi-reload'></span></span>"),
    to: "#",
    type: "button",
    class: "button is-text is-inverted",
    phx_click: "reload",
    disabled: @status.state != :idle
  ) %>
</div>

<div class="table-container">
  <table class="table is-narrow is-hoverable is-fullwidth">
    <thead></thead>
    <tbody>
      <%= for %{path: path, date: date, complete: complete} <- @status.files do %>
        <% {year, month} =
          with [year, month] <- date,
               month = month |> to_string() |> String.pad_leading(2, "0") do
            {year, month}
          else
            _ -> {"????", "??"}
          end %>
        <tr>
          <td style="font-variant-numeric: tabular-nums;"><%= "#{month}/#{year}" %></td>
          <td><%= Path.absname(path) %></td>
          <td class="has-text-centered" style="min-width: 30px;">
            <span class="spinner">
              <%= case {@status.state, complete} do %>
                <% {:running, true}   -> %>
                  <span class="icon has-text-success">
                    <span class="mdi mdi-check-bold"></span>
                  </span>
                <% {:running, false}  -> %>
                  <%= content_tag(:span, nil, class: "is-loading") %>
                <% {:error, true}     -> %>
                  <span class="icon has-text-success">
                    <span class="mdi mdi-check-bold"></span>
                  </span>
                <% {:error, false}    -> %>
                  <span class="icon has-text-danger">
                    <span class="mdi mdi-alert-circle"></span>
                  </span>
                <% {:complete, true } -> %>
                  <span class="icon has-text-success">
                    <span class="mdi mdi-check-bold"></span>
                  </span>
                <% {:complete, false} -> %>
                  <span class="icon has-text-info">
                    <span class="mdi mdi-debug-step-over"></span>
                  </span>
                <% {:idle, _} -> %>
              <% end %>
            </span>
          </td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<%= if @status.state == :idle do %>
  <.form :let={f} for={@changeset} phx-change="change" phx-submit="import">
    <div class="field mb-6">
      <%= label(f, :timezone, gettext("Time zone"), class: "label is-medium ") %>
      <div class="control">
        <div class="select is-fullwidth">
          <%= select(f, :timezone, @timezones, disabled: @status.state != :idle) %>
        </div>
      </div>
    </div>

    <div class="field">
      <div class="control">
        <%= submit(gettext("Import"),
          class: "button is-success is-fullwidth",
          disabled: !@changeset.valid? or length(@status.files) < 1,
          phx_disable_with: "Saving...",
          phx_loading_class: "is-loading"
        ) %>
      </div>
    </div>
  </.form>
<% end %>

<%= if @status.state == :error do %>
  <code class="box has-text-danger">
    <%= inspect(@status.message, pretty: true) %>
  </code>
<% end %>
